<template>
    <div class="goodsManage">
         <el-button type="success" @click="addBtn">添加商品</el-button>
        <template>
          <el-table
            :data="goodsManageList"
            border
            style="width: 100%; margin-top:15px"
            @selection-change="handleSelectionChange">
             <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="id"
              label="商品编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="proName"
              label="商品名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="proDesc"
              label="商品描述">
            </el-table-column>
            <el-table-column
              prop="num"
              label="商品库存">
            </el-table-column>
            <el-table-column
              prop="size"
              label="商品尺寸">
            </el-table-column>
            <el-table-column
              prop="statu"
              label="是否下架">
                <template slot-scope='scope'>
                  <span>{{ scope.row.statu | isGoodsDown }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width ='300'>
              <template slot-scope="scope">
                <el-button
                  type="warning"
                  plain
                  @click="handleDownGoods(scope.$index, scope.row)"
                  >下架</el-button>
                <el-button
                  type="success"
                  plain
                  @click="selectGoodsDetail(scope.row)"
                  >查看商品详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 弹出添加对话框 -->
        <el-dialog title="添加商品" :visible.sync="adddialogFormVisible">
           <template>
            请选择品牌：<el-select v-model="addgoodsList.brandId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.brandName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
          <el-form :model="addform" :rules="rules" ref="addform"  >
            <el-form-item prop="proName">
              <el-input  style="margin-top:10px;" v-model="addform.proName" placeholder="请输入产品名称" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  prop="proDesc">
              <el-input  style="margin-top:10px;" v-model="addform.proDesc" placeholder="请输入产品描述" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  prop="num">
              <el-input  style="margin-top:10px;" v-model.number="addform.num" placeholder="请输入产品数量" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  prop="size">
              <el-input  style="margin-top:10px;" v-model.number="addform.size" placeholder="请输入产品尺码,如20-39" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item  prop="oldPrice">
              <el-input  style="margin-top:10px;" v-model.number="addform.oldPrice" placeholder="请输入商品原价" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="price">
              <el-input  style="margin-top:10px;" v-model.number="addform.price" placeholder="请输入商品折扣价" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:3000/product/addProductPic"
            :with-credentials ='true'
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList2"
            :on-success ='handleSuccess'
            name='pic1'
            :multiple="true"
            list-type="picture"
            style="margin-top:15px;">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="adddialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addsubmit('addform')">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 商品详情对话框 -->
        <el-dialog title="商品详情" :visible.sync="detaildialogFormVisible">
          <template>
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="(item) in Detailpic" :key="item.id">
                <h3 class="detailPic"><img :src='"http://127.0.0.1:3000"+item.picAddr' alt=""></h3>
              </el-carousel-item>
            </el-carousel>
          </template>
          <div style="margin-bottom:10px"><el-tag type="success">商品名称</el-tag> {{detailList.proName}}</div>
          <div style="margin-bottom:10px"><el-tag type="info">商品描述</el-tag> {{detailList.proDesc}}</div>
          <div style="margin-bottom:10px"><el-tag type="warning">商品价格(折后)</el-tag> {{detailList.price}}</div>
          <div style="margin-bottom:10px"><el-tag type="danger">商品价格(原价)</el-tag> {{detailList.oldPrice}}</div>
          <div style="margin-bottom:10px"><el-tag type="info">商品大小</el-tag> {{detailList.size}}</div>
          <div style="margin-bottom:10px"><el-tag type="success">上线时间</el-tag> {{this.$moment(detailList.updateTime).format('YYYY-MM-DD hh:mm:ss')}}</div>
          <div style="margin-bottom:10px"><el-tag type="">是否上架</el-tag> {{detailList.statu===1?'上架中':"已下架"}}</div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="detaildialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="detailsubmit()">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import { selectGoodManagaList, selectSecondList, addProdunct, selectDetail } from '@/api'
// import moment from 'moment'
export default {
  data () {
    return {
      /* 对话框 */
      adddialogFormVisible: false,
      // 规则
      rules: {
        proName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        proDesc: [
          { required: true, message: '请输入产品描述', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入产品数量', trigger: 'blur' },
          { type: 'number', message: '产品数量必须为数字值', trigger: 'blur' }
        ],
        size: [
          { required: true, message: '请输入产品尺码,如20-39', trigger: 'blur' },
          { type: 'number', message: '入产品尺码必须为数字值', trigger: 'blur' }
        ],
        oldPrice: [
          { required: true, message: '请输入商品原价', trigger: 'blur' },
          { type: 'number', message: '商品原价必须为数字值', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品折扣价', trigger: 'blur' },
          { type: 'number', message: '商品折扣价必须为数字值', trigger: 'blur' }
        ]

      },
      /* 商品列表 */
      goodsManageList: [],
      /* 页码对象 */
      pageObj: {
        page: 1,
        pageSize: 10
      },
      /* 下拉列表 */
      options: [],
      /* 添加表单 */
      addform: {},
      value: '',
      /* 添加商品列表 */
      addgoodsList: {
        proName: '',
        oldPrice: '',
        price: '',
        proDesc: '',
        size: '',
        statu: 0,
        num: '',
        brandId: '',
        picName1: '',
        picName2: '',
        picName3: '',
        picAddr1: '',
        picAddr2: '',
        picAddr3: ''
      },
      /* 上传图片 */
      fileList2: [],
      /* 弹出商品详情对话框 */
      detaildialogFormVisible: false,
      // 存储图片
      Detailpic: {},
      // 存储详情列表
      detailList: {
        oldPrice: '',
        price: '',
        proDesc: '',
        proName: '',
        size: '',
        statu: '',
        updateTime: ''
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    /* 添加商品按钮 */
    addsubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addgoodsList.proName = this.addform.proName
          this.addgoodsList.proDesc = this.addform.proDesc
          this.addgoodsList.num = this.addform.num
          this.addgoodsList.size = this.addform.size
          this.addgoodsList.oldPrice = this.addform.oldPrice
          this.addgoodsList.price = this.addform.price
          console.log(this.addgoodsList)
          addProdunct(this.addgoodsList).then(res => {
            if (res.data.success) {
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.adddialogFormVisible = false
              this.init()
              this.$refs[formName].resetFields()
            } else {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /* 添加对话框按钮 */
    addBtn () {
      this.adddialogFormVisible = true
      selectSecondList(this.pageObj).then(res => {
        this.options = res.rows
        this.addgoodsList.brandId = '请选择'
        this.fileList2 = []
      })
    },
    init () {
      selectGoodManagaList(this.pageObj).then(res => {
        this.goodsManageList = res.rows
      })
    },
    handleDownGoods (index, row) {
      // if (row.statu === 1) {
      //   row.statu = 0
      // } else if (row.statu === 0) {
      //   row.statu = 1
      // }
    },
    /* 上传成功后 */
    handleSuccess (response, file, fileList) {
      // console.log(fileList)
      if (fileList.length === 1) {
        this.addgoodsList.picName1 = fileList[0].response.picName
        this.addgoodsList.picAddr1 = fileList[0].response.picAddr
      } else if (fileList.length === 2) {
        this.addgoodsList.picName1 = fileList[0].response.picName
        this.addgoodsList.picAddr1 = fileList[0].response.picAddr
        this.addgoodsList.picName2 = fileList[1].response.picName
        this.addgoodsList.picAddr2 = fileList[1].response.picAddr
      } else if (fileList.length === 3) {
        this.addgoodsList.picName1 = fileList[0].response.picName
        this.addgoodsList.picAddr1 = fileList[0].response.picAddr
        this.addgoodsList.picName2 = fileList[1].response.picName
        this.addgoodsList.picAddr2 = fileList[1].response.picAddr
        this.addgoodsList.picName3 = fileList[2].response.picName
        this.addgoodsList.picAddr3 = fileList[2].response.picAddr
      }
      // this.addgoodsList.pic.push({'picAddr1': response.picAddr, 'picName1': response.picName, 'productId': 8})
      // console.log(this.addgoodsList)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleRemove (file, fileList) {
      if (!file.response) {
        return false
      }
      // 获取删除图片的值
      // var delpic = file.response.picAddr
      // 查找索引
      var index = this.addgoodsList.pic.findIndex((item) => {
        console.log(item)
        return item.picAddr.indexOf(file.response.picAddr) !== -1
      })
      console.log(index)
      this.addgoodsList.pic.splice(index, 1)
    },

    handlePreview (file) {
      console.log(file)
    },
    /* 查看商品详情 */
    selectGoodsDetail (row) {
      console.log(row)
      this.detaildialogFormVisible = true
      selectDetail(row.id).then(
        res => {
          this.Detailpic = res.pic
          this.detailList = res
        }
      )
    }
  },
  filters: {
    isGoodsDown (num) {
      if (num === 1) {
        return '上架中'
      } else if (num === 0) {
        return '已下架'
      }
    }
  }
}
</script>

<style lang="less" scoped>

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .detailPic{
    img{
      width: 100%;
      display: block;
    }
  }
</style>
